<template>
  <div class="main-nav">
    <div class="gb-sorts" id="sorts">
      <div class="nav-list">
        <swiper :options="swiperOptionA" ref="swiperNav">
          <swiper-slide class="flex-box" v-for="(item,index) in lists" @click="changeSlide(index)" :key = "index">
            <p :class="{active:activeIndex===index}">{{item.name}}</p>
          </swiper-slide>
        </swiper>
      </div>
      <div class="nav-main">
        <swiper :options="swiperOptionB" ref="swiperSorts">
          <swiper-slide  v-for="(item,index) in lists" :key = "index">
            <div class="sort-lists">
              <div class="sort-lists-banner" v-if="item.banner"><img v-lazy="require('../../assets/img/img-mall/'+item.banner)"></div>
              <h3>{{item.name}}</h3>
              <ul>
                <li v-for="(items,index) in item.details.lists" :key = "index"><div class="sort-lists-img"><img v-lazy="items.proImg"></div><p>{{items.proName}}</p></li>
              </ul>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/css/gb-index.scss'
// @ is an alias to /src
export default {
  name: 'mallIndex',
  data() {
    return {
      lists: '',
      swiperOptionA: {
        mousewheel: true,
        direction: 'vertical',
        slidesPerView: 'auto',
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        on: {
          click: () => {
            // console.log(this.swiperNav.clickedIndex)
            this.activeIndex = this.swiperNav.clickedIndex
            this.swiperSorts.slideTo(this.swiperNav.clickedIndex, 500, false)
          }
        }
      },
      swiperOptionB: {
        mousewheel: true,
        direction: 'vertical',
        slidesPerView: 'auto',
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        on: {
          slideChangeTransitionEnd: () => {
            // // console.log(this.activeIndex);
            this.activeIndex = this.swiperSorts.activeIndex
            this.swiperNav.slideTo(
              this.swiperSorts.activeIndex - 4 > 0 ? this.swiperSorts.activeIndex - 4 : 0,
              500,
              false
            )
          }
        }
      },
      activeIndex: 0
    }
  },
  components: {},
  computed: {
    swiperNav() {
      return this.$refs.swiperNav.swiper
    },
    swiperSorts() {
      return this.$refs.swiperSorts.swiper
    }
  },
  methods: {
    changeSlide(a) {
      this.activeIndex = a
    }
  },
  mounted() {
    this.$axios
      .get('/data/data.json')
      .then(data => {
        console.log(data)
        this.lists = data.data.result.RL
      })
      .catch(err => {
        console.log(err)
      })
  }
}
</script>
<style scoped lang="scss">
.main-nav {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 66;
  left: 0;
  top: 0;
  background: #fff;
}
</style>
